<template>
    <div class="background">
      <el-form :model="form" label-width="120px">
    <el-form-item label="账号">
      <el-input v-model="form.userName" />
    </el-form-item>
     <el-form-item label="密码">
      <el-input v-model="form.password" />
    </el-form-item>
  </el-form>
  <el-button type="primary" @click="onSubmit">登录</el-button>
    </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs,toRaw,onMounted } from 'vue'
import {loginData} from '../type/login'
import {useRouter} from 'vue-router'
export default defineComponent({
    name: 'App',
    setup(){
        const data=reactive(new loginData())
        const router=useRouter()
        const onSubmit=()=>{
            console.log( data.form.userName, toRaw(data.form.userName));
            router.push('/home')
        }
        console.log('111111');
        onMounted(()=>{
     console.log(2222);
        })
        
        return {
            ...toRefs(data),
            onSubmit
        }
    }
})
</script>
<style scoped lang='scss'>
.background{
    // background: red;
    width: 100%;
    height: 100%;
}
</style>